<template>
    <div class="validate-input-container pb-3">
        <input 
        v-if="tag!== 'textarea'"
        type="text"
        class="form-control"
        :class="{'is-invalid': inputRef.error }"
        v-model="inputRef.val"
        @blur="ValidateInput"
        @input="updateValue"
        v-bind="$attrs"
   />
<textarea 
    v-else
    class="form-control"
    :class="{'is-invalid':inputRef.error}"
    @blur="ValidateInput"
    @input="updateValue"
    v-bind="$attrs"
></textarea>
<span class="invalid-feedback" v-if="inputRef.error">{{ 
    inputRef.message 
  }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,PropType, onMounted } from "vue";
import{ emitter } from "./ValidateForm.vue";
const emailReg=
  /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
interface RuleProp{
    type: "required" | "email"; //他可以同时实现两种，必选的 | 必填的 
    message:string ;
}
// RulesProp 是在 RuleProp的基础上扩展的 
export type RulesProp=RuleProp[];
// 将添加搭配父元素身上的属性放到子元素上，需要两件事
// 1.把父元素的东西删除 inheritAttrs:false
// 2.使用v-bind="$attrs"绑定上元素 
export type TagType = "input" | "textarea";
export default defineComponent({
    props:{
        //我们在上边已经定义了它是一个数组 
        rules:Array as PropType<RulesProp>,
        modelValue:String,
        tag:{
          type:String as PropType<TagType>,  
        },
    },
    setup(props,context){
        const inputRef= reactive({
    // 如果他一开始有值的话，应该在你的modelValue取值
    // 如果刷新页面你的Input里有值是不是要在页面显示出来，显示出来就是props.modelVal
    val:props.modelValue || "", //内容 他应该有这两种情况 
    error: false, //返回一个错误，就是他的一个错误信息
    message: "",//返回的错误信息 
        });
    
    
    // 你往里面输入内容鼠标只起到了一个失焦和获焦的作用
    // 你输入内容应该是你的键盘事件
    const updateValue = (e:KeyboardEvent) =>{
        //HTMLInputElement 是input标签的这个元素 
        //就是拿到你的数据源推断他是不是当前元素，然后收到Value值赋给targetvallue
        const targetValue=(e.target as HTMLInputElement).value;
        inputRef.val= targetValue;
        context.emit("value",targetValue);
    };
    const ValidateInput=()=>{
        if(props.rules){
            const allPassed = props.rules.every((rule)=>{
                //检测数组中的元素是否通过检测
                let passed =true;
                inputRef.message=rule.message;
                switch(rule.type){
                    case "required":
                        //不能为空才可以通过
                        passed=inputRef.val.trim() !=="";
                        break;
                        case "email":
                            //检测你输入框里的内容
                            passed=emailReg.test(inputRef.val);
                            break;
                            default: //如果都不符合
                            break;
                }
                //把最后结果返回出去 
                return passed;
            });
            inputRef.error = !allPassed;
            return allPassed;
        }
    };
    onMounted(()=>{
        emitter.emit("form-item-created",ValidateInput);
    });
    return{
        inputRef,
        updateValue,
        ValidateInput,
    };
},
});




//             val:'', //内容
//             error:false, //返回一个错误，就是给它一个错误信息 
//             message:'' //返回的错误信息
//             })
//         const validateInput=()=>{
//             if(props.rules){
//                 const allPassed =props.rules.every((rule)=>{
//                     let passed=true
//                     inputRef.message=rule.message
//                     switch(rule.type){
//                         case 'required':
//                             //不能为空才可以通过
//                             passed = inputRef.val.trim() !==''
//                             break
//                             case 'email':
//                                 passed = emailReg.test(inputRef.val)
//                                 break
//                     }
//                     return passed 
//                 })
//                 inputRef.error = !allPassed
//            }
//         }
//         return{
//             inputRef,
//             validateInput
//         }
//     }
// })
</script>


<style scoped></style>